// @flow

import * as React from 'react';
import Layer from '../../components/SimpleLayer/Layer';
import Message from '../../components/SimpleLayer/Message';
import { connect } from 'react-redux';
import {clearTag} from '../../modules/utils';
import SelectNavHOC from '../SelectNavHOC';
import ContentSlideIn from '../ContentSlideIn';
import SlideInTr from '../SlideInTr';
import { getTypes,addType,SGupdateType,SGremoveType } from '../../actions/types.action';

type typ = {
	id: string,
	name: string
}
type Props = {
	TypesList: Function,
	user: Object,
	selectNav: Function,
	removeType: Function,
	updateType: Function,
	addType: Function,
	types: Array<typ>
}

@SelectNavHOC
@connect(mapStateToProps,mapDispatchToProps)
export default class Types extends React.Component<Props> {
	componentDidMount(){
		this.props.TypesList({
			token:this.props.user.token
		});
		this.props.selectNav('tpm');
	}
	removeType(id: string): void{
		let $this=this;
		Layer({
			width:350,
			height:200,
			content:'<div style="line-height: 80px;font-size: 14px;color: #666;text-align: center;">确认删除吗？</div>',
			onOK(){
				$this.props.removeType({id});
				this.delete();
			}
		});
	}
	showLayer(isEdit: ?any,id: ?string): void{
		let $this=this;
		let types=$this.props.types;
		let v='';
		if (isEdit) {
			v=(types.filter(tp=>tp.id===id)[0]||{name:''}).name;
		}
		Layer({
			width:400,
			height:215,
			title:(isEdit?'修改':'新增')+'分类',
			content:'<div class="addline">分类名称：&nbsp;&nbsp;<input type="text" class="inpt" id="typename" value="'+v+'" maxlength=10 /></div>',
			onShow(){
				clearTag();
			},
			onOK(){
				let typ: any = document.querySelector('#typename');
				if (!typ.value) {
					typ.focus();
					return;
				}
				let filterTps=isEdit?types.filter(tp=>tp.name===typ.value&&tp.id!==id):types.filter(tp=>tp.name===typ.value);
				if (filterTps.length) {
					Message.error({
						top:'6px',
						width:'300',
						content:'分类重复！',
						delayAutoClose:1200,
						yes:false
					});
					typ.focus();
					return;
				}
				if (isEdit) {
					$this.props.updateType({
						id,
						name:typ.value
					});
				}else{
					$this.props.addType({
						name:typ.value
					});
				}
				
				this.delete();
			}
		});
	}
	render(): React.Node {
		let {
			types
		} = this.props;
		return (
			<div className="types">
				<div className="pagectrl">
					<div className="fr btn btn-primary ease3" onClick={()=>this.showLayer()}><i className="iconfont icon-add"></i>新增分类</div>
				</div>
				<div className="table">
					<ContentSlideIn>
						<table>
							<thead>
								<tr>
									<th align="center" width={80}>序号</th>
									<th width={300}>分类名称</th>
									<th align="center" width={150}>操作</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								{
									types.length?
									types.map((type,i)=>{
										return (
											<SlideInTr key={type.id} item={type}>
												<td align="center">{i+1}</td>
												<td>{type.name}</td>
												<td align="center">
													<span className="item-ctrl ease3" onClick={()=>this.showLayer('isEdit',type.id)}>编辑</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
													<span className="item-ctrl ease3" onClick={()=>this.removeType(type.id)}>删除</span>
												</td>
												<td></td>
											</SlideInTr>
										);
									}):
									<tr><td colSpan={4}><div className="nodata">暂无数据</div></td></tr>
								}
							</tbody>
						</table>
					</ContentSlideIn>
				</div>
			</div>
		);
	}
}

function mapStateToProps(state: Object): Object {
	return {
		types: state.Types.types.reverse()
	}
}
function mapDispatchToProps(dispatch: Function): Object{
	return {
		TypesList: data => dispatch(getTypes(data)),
		addType: data => dispatch(addType(data)),
		updateType: data => dispatch(SGupdateType(data)),
		removeType: data => dispatch(SGremoveType(data))
	}
}
